"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";

import { CONFIG } from "../common/config.js";
import { GOTOMixin } from "./mixins.jsx";

var TradingMixin = {
	renderHeader: function(title){
		return (
			<header id="header">
				<div className="header_sort_type">
	                <span className="first now">日</span><span className="">周</span><span className="">月</span><span className="">季</span><span className="last">年</span>
	            </div>
				<span className="back_btn" onTouchTap={this.gotoProduct}><i className="icon-angle-left"></i></span>
				<span className="header_left_title"><span>{title}</span></span>
			</header>
		);
	},
	renderRank: function(){
		return (
			<span id="barprogress">
				<table>
					<tbody><tr className="n1">
						<td className="title"><span className="num">1.</span>河北</td>
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{width: "100%"}}>210亿元</div>
							</div>
						</td>
					</tr>
					<tr className="n2">
						<td className="title"><span className="num">2.</span>长春</td>
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{width: "70%"}}>210亿元</div>
							</div>
						</td>
					</tr>
					<tr className="n3">
						<td className="title"><span className="num">3.</span>广州</td>
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{width: "60%"}}>210亿元</div>
							</div>
						</td>
					</tr>
					<tr>
						<td className="title"><span className="num">4.</span>浙江</td>
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{width: "40%"}}>210亿元</div>
							</div>
						</td>
					</tr>
					<tr>
						<td className="title"><span className="num">5.</span>西安</td>
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{width:"30%"}}>210亿元</div>
							</div>
						</td>
					</tr>
					<tr>
						<td className="title"><span className="num">6.</span>成都</td>
						<td className="value">
							<div className="progress">
							  <div className="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style={{width:"25%"}}>210亿元</div>
							</div>
						</td>
					</tr>
				</tbody></table>
			</span>
		)
	},
	componentDidMount: function(){
		var parent = ReactDOM.findDOMNode(this);
		var parent = $(parent).parent();
		var className = parent.attr('class');
		if(className != 'page_bargain'){
			parent.attr('class', 'page_bargain');
		}
	}
};

var PageProductDetail = React.createClass({
	mixins: [History, GOTOMixin, TradingMixin], // Reflux.connect(FundlistStore, "fundlist"),],
	getInitialState: function(){
		return {
		};
	},
	render: function(){
		if(this.props.location.query.page == 'SFOM'){   // 股基占有率
			return this.renderSFOM();
		} else if(this.props.location.query.page == 'public'){  // 公募类
			return this.renderPublic();
		} else if(this.props.location.query.page == 'fixed'){   // 固收类
			return this.renderFixed();
		} else if(this.props.location.query.page == 'equity'){  // 权益类
			return this.renderEquity();
		}
	},
	renderSFOM: function(){
		return (
	<div id="container" className="container">
		{this.renderHeader('股基占有率')}
		<div id="page_main">
			<div className="page_detail_model">
				<div className="search_date red_bg black_bg">
					<div className="datetime_input date to_datetime" id="datetimepicker">
						<input name="endDate" type="text" value="2015-09-24" readOnly={true}/>
						<span className="add-on"><i className="icon-th icon-calendar"></i></span>
					</div>
					<div className="name">
						<i className="icon-sitemap"></i><span>平安证券</span>
					</div>
					<div className="line">
						<div className="line"><div className="line"><div className="line">
							<div className="line"></div></div></div>
						</div>
				    </div>
				</div>
				<div className="base_main">
					<div className="mid_info">
						<div className="chart"></div>
						<div className="info">
							<div className="first">
								<p className="title"><span></span><label>存量资产</label></p>
								<p className="value">375亿元</p>
							</div>
							<div className="second">
								<p className="title"><span></span><label>新增资产</label></p>
								<p className="value">419亿元</p>
							</div>
							<div className="top_line">
								<p className="title">客户总资产</p>
								<p className="value">525亿元</p>
							</div>
						</div>
					</div>
					<div className="all_chart"></div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
			                <span className="first now">分公司</span><span className="second">营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>
					{this.renderRank()}
				</div>
			</div>
		</div>
	</div>
		)
	},
	renderPublic: function(){
		return (
	<div id="container" className="container">
		{this.renderHeader('公募类')}
		<div id="page_main">
			<div className="page_detail_model">
				<div className="search_date red_bg black_bg">
					<div className="datetime_input date to_datetime" id="datetimepicker">
						<input name="endDate" type="text" value="2015-09-24" readOnly={true}/>
						<span className="add-on"><i className="icon-th icon-calendar"></i></span>
					</div>
					<div className="name">
						<i className="icon-sitemap"></i><span>平安证券</span>
					</div>
					<div className="line">
						<div className="line"><div className="line"><div className="line">
							<div className="line"></div></div></div>
						</div>
				    </div>
				</div>
				<div className="base_main">
					<div className="mid_info">
						<div className="chart"></div>
						<div className="info">
							<div className="first">
								<p className="title"><span></span><label>传统成交量</label></p>
								<p className="value">4600亿元</p>
							</div>
							<div className="second">
								<p className="title"><span></span><label>两融成交量</label></p>
								<p className="value">4600亿元</p>
							</div>
							<div className="top_line">
								<p className="title">总成交量</p>
								<p className="value">9200亿元</p>
							</div>
						</div>
					</div>
					<div className="all_chart"></div>
					<div className="all_chart"></div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
			                <span className="first now">分公司</span><span className="second">营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>
					{this.renderRank()}
				</div>
			</div>
		</div>
	</div>
		)
	},
    renderFixed: function(){
		return (
	<div id="container" className="container">
		{this.renderHeader('固收类')}
		<div id="page_main">
			<div className="page_detail_model">
				<div className="search_date red_bg black_bg">
					<div className="datetime_input date to_datetime" id="datetimepicker">
						<input name="endDate" type="text" value="2015-09-24" readOnly={true}/>
						<span className="add-on"><i className="icon-th icon-calendar"></i></span>
					</div>
					<div className="name">
						<i className="icon-sitemap"></i><span>平安证券</span>
					</div>
					<div className="line">
						<div className="line"><div className="line"><div className="line">
							<div className="line"></div></div></div>
						</div>
				    </div>
				</div>
				<div className="base_main">
					<div className="mid_info">
						<div className="chart"></div>
						<div className="info">
							<div className="first">
								<p className="title"><span></span><label>传统成交量</label></p>
								<p className="value">4600亿元</p>
							</div>
							<div className="second">
								<p className="title"><span></span><label>两融成交量</label></p>
								<p className="value">4600亿元</p>
							</div>
							<div className="top_line">
								<p className="title">总成交量</p>
								<p className="value">9200亿元</p>
							</div>
						</div>
					</div>
					<div className="all_chart"></div>
					<div className="all_chart"></div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
			                <span className="first now">分公司</span><span className="second">营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>
					{this.renderRank()}
				</div>
			</div>
		</div>
	</div>
		)
	},
    renderEquity: function(){
		return (
	<div id="container" className="container">
		{this.renderHeader('权益类')}
		<div id="page_main">
			<div className="page_detail_model">
				<div className="search_date red_bg black_bg">
					<div className="datetime_input date to_datetime" id="datetimepicker">
						<input name="endDate" type="text" value="2015-09-24" readOnly={true}/>
						<span className="add-on"><i className="icon-th icon-calendar"></i></span>
					</div>
					<div className="name">
						<i className="icon-sitemap"></i><span>平安证券</span>
					</div>
					<div className="line">
						<div className="line"><div className="line"><div className="line">
							<div className="line"></div></div></div>
						</div>
				    </div>
				</div>
				<div className="base_main">
					<div className="mid_info">
						<div className="chart"></div>
						<div className="info">
							<div className="first">
								<p className="title"><span></span><label>传统成交量</label></p>
								<p className="value">4600亿元</p>
							</div>
							<div className="second">
								<p className="title"><span></span><label>两融成交量</label></p>
								<p className="value">4600亿元</p>
							</div>
							<div className="top_line">
								<p className="title">总成交量</p>
								<p className="value">9200亿元</p>
							</div>
						</div>
					</div>
					<div className="all_chart"></div>
					<div className="all_chart"></div>
				</div>
				<div className="btm_main">
					<div className="title_main">
						<div className="sort_type">
			                <span className="first now">分公司</span><span className="second">营业部</span>
			            </div>
						<div className="title">
							<i className="icon-flag"></i>
							<span>排名情况</span>
						</div>
					</div>
					{this.renderRank()}
				</div>
			</div>
		</div>
	</div>
		)
	}
});

export { PageProductDetail };